import React, { useRef, useState, useEffect } from 'react';
import { message, Form, Select, TreeSelect, Radio } from 'antd';
import { DrawerForm, ProFormText } from '@ant-design/pro-form';
import { SettingOutlined } from '@ant-design/icons';
import { getRole } from '@/api/role';
import { getAllDepartment, changeUser } from '@/api/user/user-manager';

const { Option } = Select;

export default ({ data, refresh }: any) => {
  const { username, userId, status, email, ssex, mobile, roleId, deptId } =
    data;
  // console.log(data);
  const [Depdata, setDepdata] = useState([]);
  const [role, setRole] = useState([]);

  const requestData = async () => {
    let { data } = await getAllDepartment();
    // console.log(data.rows.children);
    setDepdata(data.rows.children);
  };
  const requestRole = async () => {
    let { data } = await getRole();
    // console.log(data.rows);
    setRole(data.rows);
  };

  useEffect(() => {
    requestData();
    requestRole();
  }, []);

  const formRef = useRef();
  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      width={450}
      title="修改用户"
      formRef={formRef}
      trigger={<SettingOutlined style={{ color: 'rgb(64,169,255)' }} />}
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        // console.log(values);
        let res = await changeUser({ ...values, userId });
        console.log(res);
        refresh();
        message.success('提交成功');
        // 不返回不会关闭弹框
        return true;
      }}
      initialValues={{
        username,
        email,
        mobile,
        roleId,
        deptId: `${deptId}`,
        ssex,
        status,
      }}
    >
      <ProFormText
        name="username"
        width="md"
        label="用户名"
        tooltip="最少4位"
      />
      <ProFormText
        name="email"
        width="md"
        label="邮箱"
        tooltip="需要符合邮箱格式"
      />
      <ProFormText name="mobile" width="md" label="手机" />

      <Form.Item
        label="角色"
        name="roleId"
        style={{ width: '328px' }}
        rules={[
          {
            required: true,
            message: '请选择角色!',
          },
        ]}
      >
        <Select placeholder="请选择角色" allowClear>
          {role.map((v: any) => {
            return (
              <Option key={v.roleId} value={`${v.roleId}`}>
                {v.roleName}
              </Option>
            );
          })}
        </Select>
      </Form.Item>

      <Form.Item label="部门" name="deptId">
        <TreeSelect
          style={{ width: '325px' }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={Depdata}
          placeholder="请选择"
          treeDefaultExpandAll
        />
      </Form.Item>

      <Form.Item
        label="状态"
        name="status"
        rules={[
          {
            required: true,
            message: '请选择状态!',
          },
        ]}
      >
        <Radio.Group>
          <Radio value="0">锁定</Radio>
          <Radio value="1">有效</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        label="性别"
        name="ssex"
        rules={[
          {
            required: true,
            message: '请选择性别!',
          },
        ]}
      >
        <Radio.Group>
          <Radio value="1">男</Radio>
          <Radio value="0">女</Radio>
          <Radio value="2">保密</Radio>
        </Radio.Group>
      </Form.Item>
    </DrawerForm>
  );
};
